<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>全选</button>
    <button>反选</button>
    <button>取消</button>

    <ui>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
    </ui>
</body>
<style>
    .selected{
        background-color: #528bcb;
        color: #ffffff;
        border-top: 1px solid  #ffffff;
    }
</style>
<script>
    window.onload = function(){
        //模拟jQuery 
        function $(select){
            return document.querySelectorAll("select");
        }
        // var butt = $('button');
        // var lis = $('li');
        // var inputs = $('input');
        var lis = document.querySelectorAll("li");
        var buttons = document.querySelectorAll("button");
        var inputs =document.querySelectorAll("input");
        //全选 全部增加 item.checked=true实现全选
        buttons[0].onclick = function(){
            inputs.forEach((item,index)=>{
                 item.checked=true;

             })
             //给全选增加样式
             lis.forEach((item,index)=>{
                 item.className="selected";
             })
        }

        //取消 全部增加item.checked=false 实现取消
        buttons[2].onclick = function(){
           inputs.forEach((item,index)=>{
                 item.checked=false;
             })
             lis.forEach((item,index)=>{
                 item.className="";
             })
        }


        //返选  添加if条件 判断执行
        buttons[1].onclick = function(){
            inputs.forEach((item,index)=>{
                //  if(item.checked){
                //  item.checked=false;
                // }else{
                //     item.checked=true;
                // }
                item.checked?item.checked=false:item.checked=true;
             })
        }
    }
</script>
</html>